<template>
	<view class="homepage has-tab">
		<y-header title="悦管家" :isHide="hideHeader">
			<template slot="left">
				<!-- <button>后退</button> -->
				<y-tag></y-tag>
			</template>
			<template slot="right">
				<!-- <button>定位</button> -->
			</template>
		</y-header>
		<view class="h-content">
			<swiper class="h-bg">
				<swiper-item>
					<image src="../../static/home/bg.png" class="h-bg" @click="test()"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/home/bg.png" class="h-bg" ></image>
				</swiper-item>
			</swiper>
			<image src="../../static/home/s-des-f.png" class="s-des"></image>
		</view>
		
		<view v-for="i in [9, 10 ,11 ]" v-bind:key="i">
			<y-home-comp-banner></y-home-comp-banner>
			<y-home-comp-grid></y-home-comp-grid>
			<y-home-comp-hot></y-home-comp-hot>
		</view>
		
		<y-tab></y-tab>
	</view>
</template>

<script>
	import yHeader from '../../components/yHeader/yHeader.vue'
	import yTag from '../../components/yTag/yTag.vue'
	import yHomeCompHot from '../../components/home/yHomeCompHot.vue'
	import yHomeCompGrid from '../../components/home/yHomeCompGrid.vue'
	import yHomeCompBanner from '../../components/home/yHomeCompBanner.vue'
	import yTab from '../../components/yTab/yTab.vue'
	import { mapActions, mapState } from 'vuex'
	
	export default {
		data() {
			return {
				hideHeader: true
			};
		},
		methods: {
			async test () {
				console.log(this.$store)
				await this.getUserInfo()
				console.log(this.userinfo)
			},
			...mapActions('userinfo', ['getUserInfo'])
		},
		computed: {
			...mapState(['userinfo'])
		},
		onPageScroll (option) {
			console.log(option.scrollTop)
			if (option.scrollTop > 218) {
				this.hideHeader = false
			} else {
				this.hideHeader = true
			}
		},
		components: {
			yHeader,
			yTab,
			yTag,
			yHomeCompHot,
			yHomeCompGrid,
			yHomeCompBanner
		}
	}
</script>

<style lang="scss" scoped>
	.homepage {
		.h-content {
			background: white;
			.h-bg {
				width: 100%;
				height: 350upx;
			}

			.s-des {
				width: 100%;
				height: 28upx;
				display: block;
				padding: 32upx 0 26upx;
			}
		}
	}
</style>
